<template>
	<view class="my-search-container">
		<!-- 商品图片 -->
		<image class="shopImg" src="/static/wukong.png" mode="">
		</image>
		<!-- 通过view模拟输入框 -->
		<view class="my-search-box" @click="goGoodsSearch">
			<uni-icons type="search" size="17"></uni-icons>
			<text class="placeholder">搜搜你感兴趣的商品</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {

			};
		},
		methods: {
			// 跳转搜搜页面
			goGoodsSearch() {
				uni.navigateTo({
					url: "/pages/goods/goods_search/goods_search"
				})
			}
		}
	}
</script>

<style>
	.my-search-container {
		height: 53px;
		display: flex;
		align-items: center;
		padding: 0 20px;
		background: linear-gradient(90deg, rgb(29, 176, 252) 50%, rgb(64, 209, 244) 100%);
		margin-top: 0px;
	}

	.shopImg {
		width: 200rpx;
		height: 80rpx;
	}

	/* 通过view模拟输入框 */
	.my-search-box {
		margin-left: 30rpx;
		height: 32px;
		background-color: #FFFFFF;
		border-radius: 18px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 搜索框字体 */
	.placeholder {
		font-size: 14px;
		margin-left: 5px;
		color: #bbb;
	}
</style>